<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/index.js'
import { submitUserInfoService, getUserInfoService } from '@/apis/userinfo.js'
import { onLoad } from '@dcloudio/uni-app'

const UserStore = useUserStore()

// 获取表单实例
const form = ref(null)

// 表单绑定的数据
const formModel = ref({
	user_id: '',
	name: '',
	username: '',
	email: '',
	phone: '',
	avatar: ''
})

// 表单验证规则
const rules = ref({
	name: [{ pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, trigger: 'blur', message: '请输入正确的姓名' }],
	email: [
		{
			pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
			trigger: 'blur',
			message: '请输入正确的电子邮箱'
		}
	]
})

// 新增图片
const onClickAvatar = async (event) => {
	// 获取token口令
	const token = UserStore.UserInfoList.token

	uni.chooseImage({
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths
			uni.uploadFile({
				url: 'https://www.u2051641.nyat.app:64347/user/avatar',
				filePath: tempFilePaths[0],
				header: {
					Authorization: `Bearer ${token}`
				},
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (uploadFileRes) => {
					const jsonData = JSON.parse(uploadFileRes.data)
					formModel.value.avatar = jsonData.url
				}
			})
		}
	})
}

// 点击保存按钮保存用户个人信息
const onClickSave = () => {
	// 验证表单数据
	form.value
		.validate()
		.then(async (valid) => {
			if (valid) {
				await submitUserInfoService(formModel.value)
				uni.showToast({
					icon: 'success',
					title: '保存成功'
				})

				// 将更新后的个人信息存入Pinia
				UserStore.setUserInfoList({ username: formModel.value.username, avatar: formModel.value.avatar })
			}
		})
		.catch((err) => {
			if (err && err[0]) {
				uni.showToast({
					title: err[0].message,
					icon: 'none'
				})
			}
		})
}

// 点击退出按钮触发函数
const onClickExit = () => {
	uni.showModal({
		title: '提示消息',
		content: '您确定要退出登录吗？',
		confirmText: '确认',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				UserStore.clearUserInfoList()
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	})
}

// 获取用户个人信息
const getUserInfoData = async () => {
	const res = await getUserInfoService(formModel.value.user_id)
	formModel.value = res.data
}

onLoad(() => {
	// 获取用户ID
	formModel.value.user_id = UserStore.UserInfoList.user_id

	// 获取用户个人信息
	getUserInfoData()
})
</script>
<template>
	<view class="container">
		<view class="avatar" @click="onClickAvatar">
			<up-avatar size="100" mode="aspectFill" :src="formModel.avatar"></up-avatar>
			<view class="text">更换头像</view>
		</view>

		<view class="content">
			<up-form labelPosition="left" :model="formModel" :rules="rules" ref="form" labelWidth="65">
				<up-form-item label="姓名" prop="name" borderBottom>
					<up-input v-model="formModel.name" border="none" customStyle="height:80rpx"></up-input>
				</up-form-item>
				<up-form-item label="昵称" borderBottom>
					<up-input v-model="formModel.username" border="none" customStyle="height:80rpx"></up-input>
				</up-form-item>
				<up-form-item label="邮箱" prop="email" borderBottom>
					<up-input v-model="formModel.email" border="none" customStyle="height:80rpx"></up-input>
				</up-form-item>
				<up-form-item label="手机号">
					<up-input v-model="formModel.phone" border="none" disabled customStyle="height:80rpx"></up-input>
				</up-form-item>
			</up-form>
		</view>

		<view class="footer">
			<view class="footer-btn">
				<view class="save" @tap="onClickSave">保存</view>
				<view class="exit" @tap="onClickExit">退出登录</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	@mixin common-btn {
		padding: 30rpx;
		border-radius: 999px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;

	.avatar {
		width: 95%;
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 30rpx;

		.text {
			border-bottom: 2rpx solid #333;
		}
	}

	.content {
		width: 95%;
		height: 40%;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 30rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95%;
		height: 25%;
		border-radius: 30rpx;
		background-color: #fff;

		.footer-btn {
			width: 95%;
			padding: 40rpx 0;

			.save {
				@include common-btn;
				margin-bottom: 40rpx;
				background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
			}

			.exit {
				@include common-btn;
				background-image: linear-gradient(to top, #ffb199 0%, #ff0844 100%);
			}
		}
	}
}
</style>
